﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 详情页header -->
    <title>拯救者 (I5/Windows 10 家庭版/15.6英寸/8G/1T)-笔记本电脑-联想商城</title>
    <link type="text/css" rel="stylesheet" href="{{asset('css/detail.css')}}" />
    <script type="text/javascript" src="{{asset('js/detail.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/jquery-1.8.3.min.js')}}"></script>
    <link rel="stylesheet" href="{{asset('css/index.min.css')}}" />
</head>
	
<body> 
<!-- ----------------===============     top     ===============--------------- -->
@include('/home/top')
<!---------------小导航-------------------->
<div class="detail_con">
    <div class="de_location">
        <a href="/home/index">首页</a> > <a href="#">商品详情</a>
         > 拯救者 (I5/Windows 10 家庭版/15.6英寸/8G/1T)
    </div>
</div>
<!---------------小导航结束-------------------->


<!-----------------中间页-------------------->
<div class="big_box">
    <div class="big_left">
        <img id="xid" src="{{asset('images/lenovo1.jpg')}}" width="500" height="500">
        <div id="list">
            <img src="{{asset('images/lenovo1.jpg')}}" alt="" />
            <img src="{{asset('images/lenovo2.jpg')}}" alt="" />
            <img src="{{asset('images/lenovo3.jpg')}}" alt="" />
            <img src="{{asset('images/lenovo4.jpg')}}" alt="" />
        </div>
        <div style="margin-top:15px;">
            <p style="float:left">商品编号：{{$good['gid']}}</p>

            <a href="#" style="float:right;margin-right:20px" class="collect" data-id="{{$good['gid']}}">收藏商品</a>
            <a href="#" style="float:right;margin-right:20px" class="shopcar" data-id="{{$good['gid']}}">添加到购物车</a>

            <p class="clear"></p>
        </div>
        <script type="text/javascript">
            $('#list img').mouseover(function(){
                $('#xid').attr('src',$(this).attr('src'));
            })
        </script>
    </div>
    <div class="big_right">
        <div class="goodinfo">
            <p class="gname">{{$good['gname']}}</p>
            <p class="ginfo">&nbsp;&nbsp;&nbsp;{{$good['ginfo']}}</p>
        </div>
        <div class="de_info_main">
            <ul>
                <li>商场价：<b style="color:red;font-size: 20px">¥{{$good['price']}}</b></li>
                <li>库存：<b style="font-size: 20px">{{$good['stock']}}</b></li>
                <li>手机端专享价格：<b style="color:red;font-size: 20px">¥{{$good['price']-20}}</b></li>
            </ul>
        </div>
		<div class="peizhi">

		</div>
		<div style="margin-bottom:20px">
			优惠券：{{ceil($good['price']/10)}}
		</div>
        <div class="buy">
            <input type="number" value="1" />
            <button type="submit">立即购买</button>
        </div>
    </div>
    <div class="clear"></div>
</div>
<!-----------------中间页-------------------->


<!-----------------热销 评论-------------------->
<div class="hot-comment">
	<div class="hot">
		<ul>
            <li class="li-head"><span>热销商品</span></li>
            @foreach($hotgoods as $hotgood)
			<li class="li-body">
				<table align="center">
					<tr>
						<td rowspan="3"  style=""><img src="{{asset($hotgood['gpic'])}}"></td>
						<td clospan="2" style="padding-left:5px;padding-top:15px;">
							<span>{{$hotgood['gname']}}</span>
						</td>
					</tr>
					<tr>
						<td style="padding-left:5px;"><b style="color:red">¥{{$hotgood['price']}}</b></td>
					</tr>
				</table>
			</li>
			@endforeach

		</ul>
	</div>
	<div class="comment">
		<div class="comment-head">
			<ul>
				<li class="comment-li" style="background:#fff;color:red"><span>商品详情</span></li>
				<li class="comment-li"><span>配置信息</span></li>
				<li class="comment-li"><span>商品评价</span></li>
				<li class="clear"></li>
			</ul>
		</div>
		<div  class="comment-body">
			<ul>
				<li class="comment-list" style="display:block">
					<img src="{{asset($good['xxinfo'])}}">
				</li>
				<li class="comment-list" style="display:none">
                    <div style="margin-top: 50px">
					<table border="1" width="800" align="center">
                        <caption><b style="font-size: 24px">商品配置信息</b></caption>
                        <tr height="35">
                            <td>内存</td>
                            <td>{{$goodinfo['gnc']}}</td>
                        </tr>
                        <tr height="35">
                            <td>显卡</td>
                            <td>{{$goodinfo['gxk']}}</td>
                        </tr>
                        <tr height="35">
                            <td>硬盘容量</td>
                            <td>{{$goodinfo['gxk']}}</td>
                        </tr>
                        <tr height="35">
                            <td>处理器</td>
                            <td>{{$goodinfo['gclq']}}</td>
                        </tr>
                        <tr height="35">
                            <td>屏幕大小</td>
                            <td>{{$goodinfo['gsize']}}</td>
                        </tr>
					</table>
                    </div>
				</li>
				<li class="comment-list" style="display:none">
					<img src="{{asset('images/lenovo3.jpg')}}">
				</li>
			</ul>
		</div>
	</div>
	<div class="clear"></div>
	<script>
		$(function(){

			$('.comment-li').eq(0).click(function(){
				$(this).css({'background':'white','color':'red'});
				$(this).siblings().css({'background':'#eee','color':'black'});
				$('.comment-list').eq(0).css({'display':'block'});
				$('.comment-list').eq(0).siblings().css({'display':'none'});
				
			});

			$('.comment-li').eq(1).click(function(){
				$(this).css({'background':'white','color':'red'});
				$(this).siblings().css({'background':'#eee','color':'black'});
				$('.comment-list').eq(1).css({'display':'block'});
				$('.comment-list').eq(1).siblings().css({'display':'none'});
				
			});
			
			$('.comment-li').eq(2).click(function(){
				$(this).css({'background':'white','color':'red'});
				$(this).siblings().css({'background':'#eee','color':'black'});
				$('.comment-list').eq(2).css({'display':'block'});
				$('.comment-list').eq(2).siblings().css({'display':'none'});
				
			});

            //点击收藏商品
            $('.collect').click(function(){
                var gid=$(this).attr('data-id');
                $.ajax({
                    url:'/home/detail/collect',
                    data:'gid='+gid,
                    type:'get',
                    dataType:'text',
                    success:function(data){
                        //根据返回信息判断是否添加成功
                        if(data==1){
                            alert('已成功添加到收藏');
                        }else if(data==2){
                            alert('请先登录');
                            location.href='/home/login';
                        }else{
                            alert('添加失败');
                        }
                    }
                })

            });

            //点击添加到购物车
            $('.shopcar').click(function(){
                var gid=$(this).attr('data-id');
                $.ajax({
                    url: '/home/detail/shopcar',
                    data: 'gid=' + gid,
                    type: 'get',
                    dataType: 'text',
                    success: function (data) {
                        //根据返回信息判断是否添加成功
                        if (data == 1) {
                            alert('已成功添加到购物车');
                        }else if(data==2){
                            alert('请先登录');
                            location.href='/home/login';
                        }else{
                            alert('添加失败');
                        }
                    }
                });

            });
		
		})
	</script>
</div>
<!-----------------热销 评论-------------------->


<!-- ----------------===============    foot     ===============--------------- -->

</body>
</html>
